<template>
  <div class="w-full flex justify-center border-b box-border">
    <transition name="sidebarLogoFade" class="divide-y">
      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 v-else class="h-16 text-2xl leading-[64px]">{{ title }}</h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 class="sidebar-title">{{ title }}</h1>
      </router-link>
    </transition>
  </div>
</template>

<script setup>
const collapse = ref(true)
const logo = ref(false)
const title = ref('文贝通后台管理系统')
</script>

<style lang="scss" scoped></style>
